<template>
  <div class="statistics-wrapper">
    <div class="search-bar clearfix">
      <el-dropdown @command="selectProject" trigger="click" placement="bottom" :class="curMenu === 1 ? 'active' : ''">
        <span class="el-dropdown-link">
          {{projectShowName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item in projectArr" :key="item.id" :command="item">{{item.name}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="selectModule" style="margin-left: 15px;" trigger="click" placement="bottom" :class="curMenu === 2 ? 'active' : ''">
        <span class="el-dropdown-link">
          {{moduleShowName}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="max-height: 80vh; overflow: auto;">
          <el-dropdown-item v-for="item in plateArr" :key="item.id" :command="item">{{item.plateName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span @click="openFilterDialog" style="float:right;margin-right: 16px;">筛选<img style="width: 14px;" src="../../../assets/livolobim/filter.png" alt=""> <div class="dot" v-if="hasFilter"></div></span>
    </div>
    <div class="statistics-content">
      <div class="statistics-row">
        <div class="statistics-header"><span>统计</span></div>
        <div class="statistics-data">
          <el-table v-if="tableData.length > 0" :data="tableData" border style="width: 100%;font-size:12px;">
            <el-table-column fixed label="项目名称" prop="projectName" min-width="80" align="center"></el-table-column>
            <el-table-column label="任务数" prop="totalAmount" min-width="50" align="center"></el-table-column>
            <el-table-column label="未完成" prop="uncompleteAmout" min-width="50" align="center"></el-table-column>
            <el-table-column label="已完成" prop="completeAmount" min-width="50" align="center"></el-table-column>
            <el-table-column label="完成率" prop="completePercent" min-width="50" align="center">
              <template slot-scope="scope">
                {{scope.row.completePercent.toFixed(0)}}%
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:center;">
            <img v-if="tableData.length === 0" style="width:100px;" src="../../../assets/livolobim/empty.png" alt="">
          </div>
        </div>
      </div>
      <div class="statistics-row">
        <div class="statistics-header"><span>未完成</span></div>
        <div class="statistics-data">
          <el-table v-if="tableData.length > 0" :data="tableData" border style="width: 100%;font-size:12px;">
            <el-table-column fixed label="项目名称" prop="projectName" min-width="80" align="center"></el-table-column>
            <el-table-column label="待指派" prop="unassignAmount" min-width="60" align="center"></el-table-column>
            <el-table-column label="待完成" prop="undoneAmount" min-width="60" align="center"></el-table-column>
            <el-table-column label="待确认" prop="uncomfirmAmount" min-width="60" align="center"></el-table-column>
            <el-table-column label="待办总数" prop="cutoffAmount" min-width="70" align="center"></el-table-column>
            <!-- <el-table-column label="今日截止" prop="completePercent" min-width="70" align="center"></el-table-column> -->
            <el-table-column label="已逾期" prop="overdueAmount" min-width="60" align="center"></el-table-column>
            <el-table-column label="逾期率" prop="overduePercent" min-width="60" align="center">
              <template slot-scope="scope">
                {{scope.row.overduePercent.toFixed(0)}}%
              </template>
            </el-table-column>
            <el-table-column label="逾期时长（小时）" prop="overdueAllhour" min-width="70" align="center"></el-table-column>
          </el-table>
          <div style="text-align:center;">
            <img v-if="tableData.length === 0" style="width:100px;" src="../../../assets/livolobim/empty.png" alt="">
          </div>
        </div>
      </div>
      <div class="statistics-row">
        <div class="statistics-header"><span>已完成</span></div>
        <div class="statistics-data">
          <el-table v-if="tableData.length > 0" :data="tableData" border style="width: 100%;font-size:12px;">
            <el-table-column fixed label="项目名称" prop="projectName" min-width="80" align="center"></el-table-column>
            <el-table-column label="应该完成" prop="shouldcompleteAmount" min-width="50" align="center"></el-table-column>
            <el-table-column label="实际完成" prop="uncompleteAmout" min-width="50" align="center">
              <el-table-column label="提前完成" prop="aheadcompleteAmount" min-width="50" align="center"></el-table-column>
              <el-table-column label="按时完成" prop="ontimecompleteAmount" min-width="50" align="center"></el-table-column>
              <el-table-column label="逾期完成" prop="overduecompleteAmount" min-width="50" align="center"></el-table-column>
              <el-table-column label="完成总数" prop="completeAmount" min-width="50" align="center"></el-table-column>
              <el-table-column label="逾期率" prop="overduecompletePercent" min-width="50" align="center">
                <template slot-scope="scope">
                  {{scope.row.overduecompletePercent.toFixed(0)}}%
                </template>
              </el-table-column>
              <el-table-column label="逾期时长（小时）" prop="overduecompleteAllhour" min-width="90" align="center"></el-table-column>
            </el-table-column>
          </el-table>
          <div style="text-align:center;">
            <img v-if="tableData.length === 0" style="width:100px;" src="../../../assets/livolobim/empty.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <FilterPage title="统计筛选" page="statistics" :showArchiveList="true" @filterData="filterData" ref="filterpage"/>
    <Tab currentTab="statistics"/>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import Tab from './component/Tab'
import FilterPage from './component/FilterPage'

export default {
  data() {
    return {
      projectArr: [{
        name: '我可见的',
        id: 1
      },{
        name: '我关注的',
        id: 2
      },{
        name: '我管理的',
        id: 3
      },{
        name: '我负责的',
        id: 4
      }],
      plateArr: [],
      tableData: [],
      projectShowName: '按项目统计',
      moduleShowName: '按版块统计',
      curMenu: 1,
      hasFilter: false
    }
  },
  components: {
    Tab,
    FilterPage
  },
  mixins: [dingMixin],
  methods: {
    openFilterDialog() {
      this.$refs.filterpage.init();
    },
    async filterData(param) {
      this.curMenu = 3;
      this.projectShowName = '按项目统计';
      this.moduleShowName = '按版块统计';
      param.plateIds === '' && param.projectIds === '' ? this.hasFilter = false : this.hasFilter = true
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByCustomize',  {plateIds: param.plateIds, projectIds: param.projectIds})
    },
    async selectProject(item){
      this.curMenu = 1;
      this.resetSelect();
      this.projectShowName = item.name;
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByProject',  {searchType: item.id})
    },
    async selectModule(item) {
      this.curMenu = 2;
      this.resetSelect();
      this.moduleShowName = item.plateName;
      this.tableData = await this.$httpN.postB('division/statistics/statisticsByPlate',  {searchType: 2, plateIds: item.id})
    },
    resetSelect() {
      this.projectShowName = '按项目统计';
      this.moduleShowName = '按版块统计';
      this.$refs.filterpage.reset();
    }
  },
  async mounted() {
    let ModuleResult = await this.$httpN.postB('division/plate/list', {participateType: 2, limit: 999});
    let ModuleResult2 = await this.$httpN.postB('division/plate/archiveList', {limit: 999});
    this.plateArr = [...ModuleResult.list, ...ModuleResult2.list];

    this.tableData = await this.$httpN.postB('division/statistics/statisticsByProject',  {searchType: 1})
  }
}
</script>

<style lang="scss" scoped>
  .statistics-wrapper{
    background: #F8F8F8;
    .search-bar{
      height: 46px;
      background: white;
      line-height: 46px;
      padding-left:16px;
      border-bottom: 1px solid #e7e5e5;
      .active {
        color: #4983FF;
      }
      .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #4983FF;
        display: inline-block;
        vertical-align: super;
      }
    }
    .statistics-content{
      height: calc(100vh - 100px);
      padding: 16px;
      overflow: auto;
      .statistics-row{
        background: white;
        margin-bottom: 16px;
        border-radius: 3px;
        padding: 0 10px 15px;
        .statistics-header{
          line-height: 40px;
          font-size: 15px;
          font-weight: bold;
          padding-left: 15px;
          border-bottom: 1px solid #F6F6F6;
          span{
            border-left: 3px solid #6A99EF;
            padding-left:15px;
          }
        }
      }
      .statistics-data{
        margin-top: 15px;
      }
    }
  }
</style>